---
title: "Button group"
description: "Button group arranges related actions in a single horizontal or vertical container, managing spacing, focus order, and responsive wrapping so buttons remain cohesive, balanced, and accessible across breakpoints and input methods."
order: 1
published: true
---

## Basic
A button allows users to perform actions through clicks, presses, taps, or keystrokes.
<How toUse="buttons/button-group/button-group-demo" />

## Installation
```bash
npx shadcn@latest add @intentui/button-group
```

## Manual installation

```bash
npm i tailwind-variants
```

<SourceCode toShow='button-group'/>

## Anatomy
```
import { ButtonGroup } from "@/components/ui/button-group";
import { Button } from "@/components/ui/button";
```

```
<ButtonGroup>
  <Button/>
</ButtonGroup>
```


## Orientation
You can arrange buttons either horizontally or vertically using the `orientation` prop.

<How toUse="buttons/button-group/button-group-orientation-demo" />

## Group with menu
You can combine button groups with menus to create a more complex and interactive UI.
<How toUse="buttons/button-group/button-group-with-menu-demo" />

## Group with text
You can also combine button groups with text to provide context or instructions.
<How toUse="buttons/button-group/button-group-with-text-demo" />
